<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>挂件设置</title>
    <link rel="stylesheet" href="../styles/settings.css">
</head>
<body>
    <div class="settings-container">
        <h2>挂件设置</h2>
        
        <div class="settings-section">
            <h3>外观设置</h3>
            <div class="setting-item">
                <label for="opacity">透明度:</label>
                <input type="range" id="opacity" min="0.1" max="1" step="0.1" value="0.9">
                <span id="opacity-value">0.9</span>
            </div>
            
            <div class="setting-item">
                <label for="background-color">背景颜色:</label>
                <input type="color" id="background-color" value="#ffffff">
            </div>
            
            <div class="setting-item">
                <label for="font-size">字体大小:</label>
                <select id="font-size">
                    <option value="12">小</option>
                    <option value="14" selected>中</option>
                    <option value="16">大</option>
                </select>
            </div>
            
            <div class="setting-item">
                <label for="font-color">字体颜色:</label>
                <input type="color" id="font-color" value="#333333">
            </div>
        </div>
        
        <div class="settings-section">
            <h3>行为设置</h3>
            <div class="setting-item">
                <label for="always-top">始终置顶:</label>
                <input type="checkbox" id="always-top" checked>
            </div>
            
            <div class="setting-item">
                <label for="click-through">点击穿透:</label>
                <input type="checkbox" id="click-through">
            </div>
        </div>
        
        <div class="settings-section">
            <h3>数据库设置</h3>
            <div class="setting-item">
                <label for="db-path">数据库保存目录:</label>
                <input type="text" id="db-path" readonly>
                <button id="browse-db-path">浏览...</button>
            </div>
            <div class="setting-note">
                <small>备注：更改数据库路径将清除现有任务数据，请谨慎操作。</small>
            </div>
        </div>
        
        <div class="settings-section">
            <h3>分享信息设置</h3>
            <div class="setting-item">
                <label for="share-name">姓名:</label>
                <input type="text" id="share-name" placeholder="请输入您的姓名">
            </div>
            <div class="setting-item">
                <label for="share-department">部门:</label>
                <input type="text" id="share-department" placeholder="请输入您的部门">
            </div>
            <div class="setting-item">
                <label for="share-position">职位:</label>
                <input type="text" id="share-position" placeholder="请输入您的职位">
            </div>
        </div>
        
        <div class="settings-actions">
            <button id="save-settings">保存设置</button>
            <button id="cancel-settings">取消</button>
        </div>
    </div>
    
    <script src="../src/settings.js"></script>
</body>
</html>